<template>
	<view class="tab-item">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="tab-list" :style="styleObject">
			<view v-for="tab in tabList" :key="tab.id" class="tab-item"
				:class="activeTab === tab.id ? 'tab-selected' : 'not-selected'" @click="onTab(tab.id)"
				:style="activeTab === tab.id?dynamicBoxShadowStyle:''">
				<image v-if="tab.icon" :src="tab.icon" class="tab-icon" />
				<view :style="{color:activeTab === tab.id?'#000':'#a0a0a0',fontWeight:activeTab === tab.id?'bold':400}">
					{{ tab.label }}</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="tab-list" :style="{backgroundColor:objectStyle.defaultColor}">
			<view v-for="tab in tabList" :key="tab.id" class="tab-item"
				:class="activeTab === tab.id ? 'tab-selected' : 'not-selected'" @click="onTab(tab.id)"
				:style="activeTab === tab.id?wxObjectStyle:defaultObjectStyle">
				<image tab.icon :src="tab.icon" class="tab-icon" />
				<view>{{ tab.label }}</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 插槽内容区域 -->
		<view class="tab-content">
			<slot :name="activeTab"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//当前激活的tab栏id
			activeTab: {
				type: Number,
				default: 1
			},
			//tab栏的数据 id需对应上
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//主题样式
			objectStyle: {
				type: Object,
				default: () => {
					return {
						tabHeight: "52px",
						activeColor: "#ffffff",
						defaultColor: "#e2e8f8",
						primaryColor: "#406CED",
						borderRadius: '12px'
					}
				}
			}
		},
		methods: {
			onTab(e) { //传递当前选中的标签
				this.$emit('change', e)
			},
		},
		computed: {
			styleObject() { //主题样式
				const obj = {
					'--tab-height': this.objectStyle.tabHeight,
					'--active-color': this.objectStyle.activeColor,
					'--default-color': this.objectStyle.defaultColor,
					'--primary-color': this.objectStyle.primaryColor,
					'--border-radius': this.objectStyle.borderRadius
				};
				return obj
			},
			boxShadowOffset() { //动态计算涟漪量
				const getBoxHeight = parseFloat(this.objectStyle.tabHeight.replace(/\D/g, ''));
				return getBoxHeight / 1.3
			},
			dynamicBoxShadowStyle() { //APP端动态计算阴影偏移度
				const activeColor = this.objectStyle.activeColor;
				return {
					'--shadow-offset': `${this.boxShadowOffset}px`,
					'box-shadow': `24px var(--shadow-offset) 0 ${activeColor}, -24px var(--shadow-offset) 0 0 ${activeColor}`,
				};
			},
			wxObjectStyle() { //小程序端动态计算阴影偏移度 (小程序使用计算属性动态绑定style必须返回字符串形式)
				const getBoxHeight = parseFloat(this.objectStyle.tabHeight.replace(/\D/g, ''));
				const activeColor = this.objectStyle.activeColor;
				const offset = (getBoxHeight / 1.3)
				const height = this.objectStyle.tabHeight
				return `height:${height};box-shadow: 24px ${offset}px 0 ${activeColor}, -24px ${offset}px 0 0 ${activeColor};`
			},
			defaultObjectStyle() {
				const height = this.objectStyle.tabHeight
				return `height:${height}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef APP-PLUS || H5 */
	$tab-height: var(--tab-height);
	$active-color: var(--active-color);
	$default-color: var(--default-color);
	$primary-color: var(--primary-color);
	$border-radius: var(--border-radius);
	/* #endif */
	/* #ifdef MP-WEIXIN */
	$tab-height: 52px;
	$active-color: #ffffff;
	$default-color: #e2e8f8;
	$primary-color: #406CED;
	$border-radius: 12px;
	/* #endif */


	.tab-list {
		display: flex;
		position: relative;
		z-index: 2;
		border-radius: 12px 12px 0 0;
		background-color: $default-color;
		overflow: hidden; // 重点

		.tab-item {
			flex: 1;
			height: $tab-height;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			// opacity: 0.65;   // 暂时删除，不选中样式需要重新编写
			font-weight: 600;
			position: relative;
		}

		.tab-icon {
			width: 17px;
			height: 17px;
			margin-right: 3px;
			margin-top: 1px;
		}

		.tab-selected {
			opacity: 1;
			background: #ffffff;
			border-radius: 12px 12px 0 0;
			// box-shadow: 24px 40px 0 $active-color, -24px 40px 0 0 $active-color; // 重点 目前已经改为动态计算啦
		}

		.tab-selected::before {
			content: '';
			position: absolute;
			left: -6px;
			bottom: 0;
			width: 12px;
			height: $tab-height;
			border-top-left-radius: $border-radius;
			background-color: $active-color;
			transform: skewX(-15deg); // 重点
		}

		.tab-selected::after {
			content: '';
			position: absolute;
			right: -6px;
			bottom: 0;
			width: 12px;
			height: $tab-height;
			border-top-right-radius: $border-radius;
			background-color: $active-color;
			transform: skewX(15deg); // 重点
		}

		.not-selected::before {
			content: '';
			position: absolute;
			left: 6px;
			bottom: 0;
			width: 12px;
			height: $tab-height;
			background: $default-color;
			border-bottom-left-radius: $border-radius;
			transform: skewX(15deg); // 重点
		}

		.not-selected::after {
			content: '';
			position: absolute;
			right: 6px;
			bottom: 0;
			width: 12px;
			height: $tab-height;
			background: $default-color;
			border-bottom-right-radius: $border-radius;
			transform: skewX(-15deg); // 重点
			z-index: 1;
		}
	}
</style>